//车辆管理

import React, { useEffect, useState } from 'react';
import { Layout, Form, Input, Button, Table, Space, Modal, message } from 'antd';
import { setWarRecAPI,getWarRecAPI } from '@/api/admin';

const { Header, Content, Footer } = Layout;

const CarManagement = () => {
  const [form] = Form.useForm();
  const [data, setData] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);

  const columns = [
    {
      title: '车牌号',
      dataIndex: 'plateNumber',
      key: 'plateNumber',
    },
    {
      title: '所属教练编号',
      dataIndex: 'coachId',
      key: 'coachId',
    },
    {
      title: '保修时间',
      dataIndex: 'warrantyTime',
      key: 'warrantyTime',
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => (
        <Space size="middle">
          <Button onClick={() => handleEdit(record)}>编辑</Button>
          <Button onClick={() => handleDelete(record.key)}>删除</Button>
        </Space>
      ),
    },
  ];

  const handleEdit = (record) => {
    form.setFieldsValue(record);
    setModalVisible(true);
  };

  const handleDelete = (key) => {
    setData(data.filter(item => item.key !== key));
  };

  const handleSave = () => {
    form.validateFields()
      .then(values => {
        // const newData = [...data];
        // const index = newData.findIndex(item => item.key === values.key);
        // if (index > -1) {
        //   newData[index] = values;
        // } else {
        //   newData.push(values);
        // }
        console.log(values)
        //调用设置维修记录接口
        setWarRecAPI(values)
        .then(response =>{
            // 后端校验通过，处理成功响应
            console.log('Backend response:', response)
            if(response.status === '200')
            {
              message.success('新增成功！')
            }else if(response === '202')
            {
              message.error('新增失败，请稍后重试！')
            }
            
        })
        //setData(newData);
        form.resetFields();
        setModalVisible(false);
      })
      .catch(error => console.error(error));
  };

  const handleAddNew = () => {
    const key = Math.random().toString(36).substr(2, 9); // 生成随机key
    // console.log(e)
    // // const key=
    const newItem = {key,plateNumber:'',coachId: '', warrantyTime: '' }; // 创建新数据项
    // setData([...data, newItem]); // 添加到数据列表
    form.setFieldsValue(newItem); // 设置表单初始值
    setModalVisible(true); // 打开模态框
  };
  // useEffect(()=>{
  //   async function getWarRec(){
  //     const res= await getWarRecAPI()
  //     setData(res.data)
  //   }
  //   getWarRec()
  // },[data])

  return (
    <Layout>
      <Header style={{ color: 'white' }}>车辆基本信息管理</Header>
      <Content style={{ padding: '10 50px' }}>
        <div style={{ background: '#fff', padding: 24, minHeight: 280 }}>
          <Button onClick={handleAddNew} style={{ marginBottom: 16 }}>
            新增
          </Button>
          <Table columns={columns} dataSource={data} pagination={{pageSize:'8'}}/>
        </div>
        <Modal
          title="编辑车辆信息"
          visible={modalVisible}
          onCancel={() => setModalVisible(false)}
          onOk={handleSave}
        >
          <Form form={form} layout="vertical" initialValues={{}}>
            <Form.Item name="key" hidden><Input /></Form.Item>
            <Form.Item label="车牌号" name="plateNumber" rules={[{ required: true, message: '请输入车牌号' }]}>
              <Input />
            </Form.Item>
            <Form.Item label="所属教练编号" name="coachId" rules={[{ required: true, message: '请输入车辆所属教练编号' }]}>
              <Input />
            </Form.Item>
            <Form.Item label="保修时间" name="warrantyTime" rules={[{ required: true, message: '请输入保修时间' }]}>
              <Input />
            </Form.Item>
          </Form>
        </Modal>
      </Content>
      <Footer>
     <div style={{position:'absolute',left:'50%'}}>驾校管理系统&copy;2024-2099</div>
   </Footer>
    </Layout>
  );
};

export default CarManagement;